<template>
  <view class="cooperation">
    <uv-navbar
      title="种草社区"
      @leftClick="leftClick"
      bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
      :fixed="true"
    ></uv-navbar>
    <view class="cooperation-search">
      <view class="cooperation-top">
        <uv-search
          placeholder="请输入搜索内容"
          v-model="keyword"
          @search="search"
          @custom="search"
        ></uv-search>
      </view>
    </view>
    <view class="cooperation-swiper">
      <swiper
        class="swiper"
        circular
        :indicator-dots="true"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :indicator-active-color="'#ffffff'"
      >
        <swiper-item v-for="item in list1" :key="item">
          <img
            :src="BaseUrl + item.media"
            mode="	scaleToFill"
            style="width: 100%; height: 330rpx; border-radius: 30rpx"
            alt=""
          />
        </swiper-item>
      </swiper>
    </view>
    <!-- 分区 -->
    <view class="tabs">
      <view v-for="item in tabslist" :key="item" @click="Introduction(item)" style="display: flex; flex-direction: column; align-items: center">
        <image
          :src="item.image"
          mode="scaleToFill"
          style="width: 80rpx; height: 80rpx; text-align: center; margin: 0 auto"
        />
        <view style="font-size: 24rpx; margin-top: 20rpx">{{ item.name }}</view>
      </view>
    </view>
    <!-- 旅游攻略 -->
    <view v-for="item in articleList" :key="item">
      <view class="cooperation-one" @click="Goshangjia(item)">
        <view class="cooperation-one-left">
          <view class="cooperation-one-loge"></view>
          <view class="cooperation-one-text">{{ item.name }}</view>
        </view>
        <view class="cooperation-one-right">
          <view class="cooperation-one-more">更多</view>
          <image
            :src="BaseUrl + '/static/catering/more.png'"
            style="width: 30rpx; height: 30rpx"
            mode="scaleToFill"
          />
        </view>
      </view>
      <Recommend :message="item.id"></Recommend>
    </view>
  </view>
</template>

<script>
import { Recommend } from "../components/Recommend.vue";
import { BaseUrl } from "../../../utils/req.js";
export default {
  components: {
    Recommend,
  },
  data() {
    return {
      BaseUrl,
      keyword: "",
      current1: 0,

      list1: [],
      list: [
        {
          name: "全部",
        },
        {
          name: "蔬菜",
        },
        {
          name: "水果",
        },
        {
          name: "茶叶",
        },
        {
          name: "粮食",
        },
      ],
      tabslist: [],
      loge: 1,
      articleList: [],
      getlistnum: [],
    };
  },
  onLoad() {
    this.advertising();
    // this.getArticle()
    this.getlist();
  },
  methods: {
    async dian(id) {
      await this.$request
        .post("api/wanlshop/find/user/setFindUser", {
          id: id,
          type: "follow",
        })
        .then((res) => {
          if (res.data.data == 1) {
            uni.showToast({
              title: "关注成功",
              icon: "none",
              duration: 2000,
            });
            this.getlist();
          } else {
            uni.showToast({
              title: "取消关注",
              icon: "none",
              duration: 2000,
            });
            this.getlist();
          }
        });
    },

    leftClick() {
      uni.navigateBack();
    },
    // 攻略专区
    Introduction(item) {
      console.log("攻略专区", item);
      if (item.name == "攻略专区") {
        uni.navigateTo({
          url: "/dabai/pages/Introduction/Introduction?id=" + item.id,
        });
      } else if (item.name == "示范专区" || item.name == "研学专区") {
        //7加
        uni.navigateTo({
          url: `/dabai/pages/Introduction/wuejZhuanqu?id=${item.id}&name=${item.name}`,
        });
      }
    },
    // 广告
    // 合作广告
    async advertising() {
      await this.$request
        .get("api/wanlshop.common/adverts", {
          zhongcao: "种草",
        })
        .then((res) => {
          this.list1 = res.data.data.zhongcaoAdverts;
        });
    },

    // 获取种草分类
    async getlist() {
      await this.$request.get("api/wanlshop/find.find/cate", {}).then((res) => {
        console.log(res.data, "种草分类");
        this.articleList = res.data;
        this.articleList.forEach((t) => {
          if (t.pid === 0 || t.pid === 3 || t.pid === 4) {
            //7加
            this.tabslist.push(t);
          }
        });
        console.log(this.tabslist, "tabs1222222222222222222--------------");
      });
    },

    // 搜索
    async search() {
      uni.navigateTo({
        url: "/dabai/pages/accommodation/accommodation?keyword=" + this.keyword,
      });
      // await this.$request.get("api/wanlshop/find/find/getList", {
      // 	search: this.keyword,
      // 	type: 'works',
      // 	page: 1,
      // }).then((res) => {
      // 	console.log(res.data.data, '搜索1111111111111111111111111');
      // 	this.getlistnum = res.data.data
      // })
    },
    Goshangjia(id) {
      uni.navigateTo({
        url: "/dabai/pages/accommodation/accommodation?id=" + id.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.uv-search__content {
  background-color: #ffffff !important;
}

/deep/.uv-search__content__input {
  background-color: #ffffff !important;
}

/deep/._root {
  height: 84rpx;
}

/deep/.uv-search__action {
  background: linear-gradient(to right, #00a579, #057849);
  padding: 14rpx 30rpx;
  border-radius: 30rpx;
  margin-right: 4rpx;
  color: #fff !important;
  width: 140rpx !important;
}

// /deep/.uv-icon__icon {
// 	font-size: 0 !important;
// }

/deep/.uv-tabs__wrapper__nav__item {
  padding: 0 42rpx !important;
}

.cooperation {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #d3f1de 0%, #f4f6f5 30%, #f6f6f6 100%);

  .cooperation-search {
    width: 94vw;
    margin: 0rpx 3vw;
    padding-top: 190rpx;

    .cooperation-top {
      background-color: #fff;
      border-radius: 30rpx;
    }
  }

  .cooperation-swiper {
    width: 94vw;
    margin: 20rpx 3vw;
    height: 330rpx;

    .swiper {
      height: 330rpx;
      width: 100%;
    }
  }

  .tabs {
    width: 94vw;
    margin: 0 3vw;
    height: 200rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 26rpx;
  }

  .cooperation-one {
    width: 94vw;
    margin: 0 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110rpx;

    .cooperation-one-left {
      display: flex;
      align-items: center;

      .cooperation-one-text {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 30rpx;
        color: #121212;
        line-height: 37rpx;
      }

      .cooperation-one-loge {
        width: 10rpx;
        height: 36rpx;
        border-radius: 0 5rpx 5rpx 0;
        background: linear-gradient(to right, #00a579, #057849);
        margin-right: 20rpx;
      }
    }

    .cooperation-one-right {
      display: flex;
      align-items: center;

      .cooperation-one-more {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        margin-right: 20rpx;
      }
    }
  }

  .cart {
    width: 94vw;
    margin: 0 3vw;

    .cart-item {
      width: 100%;
      height: 290rpx;
      background-color: #fff;
      border-radius: 30rpx;
      margin-bottom: 20rpx;

      .cart-top {
        width: 94vw;
        margin: 0 3vw;
        padding: 32rpx 34rpx 32rpx 0;
      }

      .cart-bottom {
        display: flex;

        .cart-left {
          margin: 0 20rpx;
        }

        .cart-right {
          flex: 1;

          .cart-right-text {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
            line-height: 42rpx;
            height: 84rpx;
          }

          .cart-right-bon {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .cart-right-left {
              .cart-right-left-text {
                margin-left: 10rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 26rpx;
                color: #666666;
              }
            }

            .cart-right-right {
              display: flex;
              align-items: center;

              .cart-right-s {
                display: flex;
                align-items: center;
                margin-right: 20rpx;
                border-radius: 30rpx;
                border: 1rpx solid #057849;
                padding: 6rpx 15rpx;

                .cart-right-s-text {
                  margin-left: 10rpx;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #057748;
                }
              }

              .cart-right-ss {
                display: flex;
                align-items: center;
                margin-right: 20rpx;
                border-radius: 30rpx;
                border: 1rpx solid #666;
                padding: 6rpx 15rpx;

                .cart-right-s-texts {
                  margin-left: 10rpx;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #666666;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
